import React, {useEffect} from 'react';
import style from './home.module.styl';
import {List, Recommend, Topic, Writer} from "../../components";
import {BackToTop} from "../../components/Common";
import {hide, show} from "../../redux/slices";
import {useDispatch} from "react-redux";
import {useSelector} from "../../redux/hooks";

export const Home:React.FC = () => {
  const dispatch = useDispatch()
  const showScroll = useSelector(state => state.showScroll)
  useEffect(() => {
    const handler = (event: Event) => {
      if ((event.target as Document).documentElement.scrollTop) {
        dispatch(show())
      } else {
        dispatch(hide())
      }
    }
    document.addEventListener("scroll", handler)
    return () => document.removeEventListener("scroll", handler);
  }, [dispatch])
  return (
    <div className={style.homeWrapper}>
      <div className={style.homeLeft}>
        <img className={style.bannerImg} src="https://www.z4a.net/images/2021/04/14/20760323-da2764a07b3f92c6.webp" alt="nono"/>
        <Topic/>
        <List/>
      </div>
      <div className={style.homeRight}>
        <Recommend/>
        <Writer/>
      </div>
      {showScroll ? <BackToTop/> : null}
    </div>
  );
};

